<template>
  <!-- <a-upload
    action="/api/upload"
    :before-upload="handleBeforeUpload"
    @success="handleSuccess"
    @error="handleError"
    :before-remove="handleRemove"
    :file-list="fileList"
    multiple
    drag
    accept="image/*"
  >
    <template #trigger>
      <a-button>上传图片</a-button>
    </template>
  </a-upload> -->
  <div class="upload">
    <a-upload
      action="#"
      :fileList="file ? [file] : []"
      :show-file-list="false"
      :auto-upload="true"
      @change="onChange"
      @progress="onProgress"
      :custom-request="customRequest"
      :on-button-click="btnClick"
    >
      <template #upload-button>
        <div
          :class="`arco-upload-list-item${
            file && file.status === 'error'
              ? ' arco-upload-list-item-error'
              : ''
          }`"
        >
          <div
            class="arco-upload-list-picture custom-upload-avatar"
            v-if="file && file.url"
          >
            <img :src="file.url" />
            <div class="arco-upload-list-picture-mask">
              <IconEdit />
            </div>
            <!-- <a-progress
              v-if="file.status === 'uploading' && file.percent < 100"
              :percent="file.percent"
              type="circle"
              size="mini"
              :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
            /> -->
          </div>
          <div
            class="arco-upload-list-picture custom-upload-avatar"
            v-else-if="props.file"
          >
            <img :src="props.file" />
            <div class="arco-upload-list-picture-mask">
              <IconEdit />
            </div>
            <!-- <a-progress
              v-if="file.status === 'uploading' && file.percent < 100"
              :percent="file.percent"
              type="circle"
              size="mini"
              :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
            /> -->
          </div>
          <div class="arco-upload-picture-card" v-else>
            <div class="arco-upload-picture-card-text">
              <IconPlus />
              <div style="margin-top: 10px; font-weight: 600">上传图片</div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
  </div>
</template>
    
<script setup lang="ts">
import { ref } from "vue";
import { uploadApi } from "@/api/index";
import { FileItem } from "@arco-design/web-vue";
import { promises } from "dns";

interface UploadProps {
  customBtnFunc?: Function | null;
  file?: string;
  id: string;
}
const props = defineProps<UploadProps>();

const emit = defineEmits(["update", "delete"]);
const file = ref();

const onChange = (_, currentFile) => {
  // file.value = {
  //   ...currentFile,
  //   // url: URL.createObjectURL(currentFile.file),
  // };
  // console.log(_[0].file);
  // console.log(file.value);
};
const onProgress = (currentFile: any) => {
  // file.value = currentFile;
  // console.log(currentFile);
};
const customRequest = async (option) => {
  const { onProgress, onError, onSuccess, fileItem, name } = option;
  // console.log(option);
  const formData = new FormData();

  formData.append("file", fileItem.file);
  formData.append("fileId", props.id);
  // console.log(fileItem.file);
  // console.log(formData.get("file"));
  await uploadApi
    .upload(formData)
    .then((res) => {
      // console.log(res);
      // file.value.url = res.data?.imgUrl;
      emit("update", res.data?.imgUrl);
    })
    .catch((err) => {
      console.log(err);
    });
};
// 点击上传按钮时
const btnClick = (event: Event) => {
  if (typeof props.customBtnFunc === "function") {
   return props.customBtnFunc(event);
  }
};
</script>